<template>
  <ul class="letter">
    <li class="item"
    v-for="(item,index) in words"
    :key="index"
    @click="$emit('letter',item)"
    :ref="item"
    @touchmove="moth"
    >{{ item }}</li>
  </ul>
</template>

<script>
export default {
  name: 'Letter',
  props: {
    list: Object
  },
  methods: {
    moth (event) {
      // 如何得到当前滑动到的字母？——已知字母数组——知道当前移动到的字母位置（第几个），
      // 位置 = [(鼠标的Y轴坐标 - 头部高度) - 字母A距离顶部的高度] / 每个字母的高度
      // 了解事件的一些相关信息：事件对象是什么？

      // console.log('move') // 打印看触摸事件是否绑定成功
      // console.log(event.touches[0].pageY) // 打印鼠标Y轴的坐标位置
      let mousey = event.touches[0].pageY // 声明一个变量接收鼠标Y轴的坐标
      // console.log(mousey)
      let atotop = this.$refs['A'][0].offsetTop // A字母距离顶部的高度
      let letterDis = mousey - 80 - atotop // 在字母部分移动的高度
      // console.log(letterDis)
      let letterheight = this.$refs['A'][0].offsetHeight // 得到字母元素的高度
      let index = Math.floor(letterDis / letterheight) // 得到当前移动到字母的下标，且向下取整。
      let curLetter = this.words[index]
      if (curLetter) {
        this.$emit('letter', curLetter)
      }
    }
  },
  computed: {
    words () {
      const arr = []
      for (let item in this.list) {
        arr.push(item)
      }
      return arr
    }
  }
}
</script>

<style lang="stylus" scoped="scoped">
   @import '~@/assets/css/variable.styl'
 .letter
  display flex
  flex-direction column
  justify-content center
  position fixed
  top 1.6rem
  right 0rem
  bottom 0rem
  width 0.4rem
  text-align center
  .item
   line-height 0.45rem
   color $bgcolor
</style>
